<template>
  <div>
    <h4>前一周共新增{{total}}例阳性，详细情况见下图：</h4>
    <!-- 前一周的数据：柱状图 -->
    <div v-if="pageData.length > 0" id="prev_week_district_data" class="echart" style="width: 100vw;height: 60vh;"></div>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
  <script>
let me;
import { getYangTotal, getPrevWeekYangListByDistrict } from "@/api/fangyiData/bingli.api"
export default {
  data() {
    return {
      total: "--",
      pageData: [],
      // 前一日的起始时间点
      timeStart: "",
      timeEnd: "",
      // 前一周
      prevWeekDates: [],
    }
  },
  created() {
  },
  mounted() {
    me = this;
    // 当前时间点减7*24小时，然后再算凌晨的起始时间段
    let d = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
    let year = d.getFullYear(), month = d.getMonth() + 1, date = d.getDate();
    me.timeStart = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 00:00:00`;
    // 当前时间点减24小时，然后再算夜间的结束时间段
    let d1 = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
    let year1 = d1.getFullYear(), month1 = d1.getMonth() + 1, date1 = d1.getDate();
    me.timeEnd = `${year1}-${month1 > 9 ? month1 : "0" + month1}-${date1 > 9 ? date1 : "0" + date1} 23:59:59`;
    me.queryYangTotal();// 获取前一周的阳性总数
    me.queryPrevWeekYangListByDistrict();
    for (var i = 0; i < 7; i++) {
      me.prevWeekDates.push(getYearMonthDate(new Date(new Date().getTime() - (7 - i) * 24 * 60 * 60 * 1000)));
    }
    function getYearMonthDate(timestamp) {
      let d = new Date(timestamp);
      let year = d.getFullYear(), month = d.getMonth() + 1, date = d.getDate();
      return `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date}`;
    }
  },
  methods: {
    /**
     * 获取前一周的阳性总数
     */
    queryYangTotal() {
      getYangTotal({
        timeStart: me.timeStart,
        timeEnd: me.timeEnd
      }).then(res => {
        if (res.code == "200") {
          me.total = res.data;
        } else {
          me.total = "--";
        }
      }).catch(err => {
        me.total = "--";
      })
    },
    /**
     * 分各个行政区查询新增数据
     */
    queryPrevWeekYangListByDistrict() {
      let rLoading = me.openLoading();
      getPrevWeekYangListByDistrict({
        timeStart: me.timeStart,
        timeEnd: me.timeEnd,
      }).then(res => {
        rLoading.close();
        if (res.code == "200") {
          me.pageData = res.data;
          if (me.pageData.length > 0) {
            me.$nextTick(() => {
              me.renderPrevWeek();
            })
          }
        } else {
          me.$message.error(res.msg || "查询失败，请稍后再试~");
        }
      }).catch(err => {
        rLoading.close();
        me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
      })
    },
    // 查询前一周的疫情数据
    renderPrevWeek() {
      // 先按行政区或症状合并数据
      let series = {};
      me.pageData.forEach(item => {
        if (!series[item.name]) {
          series[item.name] = [{
            date: item.date,
            num: item.num
          }];
        } else {
          series[item.name].push({
            date: item.date,
            num: item.num
          });
        }
      })
      // 没有数据的日期，要设置为0
      let series11 = [];
      for (let k in series) {
        let numList = [];
        for (var i = 0; i < me.prevWeekDates.length; i++) {
          let thisDateData = series[k].filter(item => {
            return item.date == me.prevWeekDates[i]
          })
          if (thisDateData.length > 0) {
            numList.push(thisDateData[0].num);
          } else {
            numList.push(0);
          }
        }
        series11.push({
          name: k,
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: numList
        })
      }
      console.log("series11", series11);
      let charts = me.$echarts.init(document.getElementById('prev_week_district_data'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: me.prevWeekDates
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: series11
      };
      charts.setOption(option);
    },
  },
}
  </script>
  <style lang="scss" scoped>
  h4 {
    padding-bottom: 32px;
  }
.no-data {
  margin-top: 20vh;
  text-align: center;
}
</style>